<template>
  <div class="app-container">

    <div class="el-row">
      <el-button type="primary" @click="openAddVisible">添加职员</el-button>
      <el-button type="danger" @click="delBatch">批量退工</el-button>
    </div>
    <div class="row">

      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="姓名">
          <el-input v-model="formInline.name" placeholder="请输入"></el-input>
        </el-form-item>

        <el-form-item label="所在地址:">

          <!-- 上海市 -->
          <el-input v-model="input" placeholder="请输入内容" style="width:10%" disabled></el-input>

          <!--上海市的区域-->
          <el-select v-model="areaInfo" placeholder="请选择" clearable @change="searchStreets">
            <el-option
              v-for="item in areasList"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            >
            </el-option>
          </el-select>

          <!--上海区域的街道-->
          <el-select v-model="streetsInfo" clearable placeholder="请选择">
            <el-option
              v-for="item in streetsList"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="状态">
          <el-select v-model="formInline.state" clearable placeholder="职员状态">
            <el-option label="在职" value="1"></el-option>
            <el-option label="离职" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>

    </div>

    <!--清洁人员列表-->
    <div class="el-row">
      <el-table
        :data="list"
        style="width: 100%">

        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          prop="id"
          label="ID"
          width="180">
        </el-table-column>
        <el-table-column
          prop="clrName"
          label="姓名"
          width="180">
        </el-table-column>
        <el-table-column
          label="头像"
          width="180"
        >
          <template slot-scope="scope">
            <el-image
              style="width: 60px; height: 60px;border-radius: 10%"
              :src="scope.row.clrImg"
              :fit="fit"></el-image>
          </template>

        </el-table-column>
        <el-table-column
          label="状态"
          width="180">
          <template slot-scope="scope">
            <span v-if="scope.row.clrState == 1">在职</span>
            <span v-if="scope.row.clrState == 0">离职</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="180">
          <template slot-scope="scope"
          >
            <el-button
              size="mini"
              type="primary"
              @click="openEditVisible(scope.row.id)"
            >修改
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div><!--分页导航栏-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[2, 4, 8, 16]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>

    <!--模态框-->
    <div>
      <el-dialog
        title="提示"
        :visible.sync="editVisible"
        width="30%"
        :before-close="closeEditVisible">


        <!--修改信息-->
        <el-form ref="form" :model="editCleanerForm" label-width="80px">
          <el-form-item label="职工姓名:">
            <el-input v-model="editCleanerForm.clrName" style="width: 50%"></el-input>
          </el-form-item>
          <el-form-item label="所属区域">
            <el-select v-model="editCleanerForm.clrArea" placeholder="请选择区域" clearable @change="searchStreets2">
              <el-option v-for="item in areasList"
                         :key="item.code"
                         :label="item.name"
                         :value="item.code"
              ></el-option>
            </el-select>
          </el-form-item>


          <el-form-item label="所属街道">
            <el-select v-model="editCleanerForm.clrStreet" clearable placeholder="请选择区域">
              <el-option v-for="item in streetsList2"
                         :key="item.code"
                         :label="item.name"
                         :value="item.code"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="状态">
            <el-select v-model="editCleanerForm.clrState" clearable placeholder="请选择状态">
              <el-option label="在职" value="1"></el-option>
              <el-option label="离职" value="0"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="头像上传">
            <el-upload
              class="avatar-uploader"
              :action="'http://localhost:8087/cleaner/uploadImg?id='+editCleanerForm.id"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
              name="myHeader">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>

          </el-form-item>

          <el-form-item>
            <el-button @click="closeEditVisible">取 消</el-button>
            <el-button type="primary" @click="submitEdit">确 定</el-button>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">

  </span>
      </el-dialog>
    </div>
    <!--模态框-->

    <!--模态框-->
    <div>
      <el-dialog
        title="提示"
        :visible.sync="addVisible"
        width="30%"
        :before-close="closeAddVisible">


        <!--新增信息-->
        <el-form ref="form" :model="addCleanerForm" label-width="80px">
          <el-form-item label="职工姓名:">
            <el-input v-model="addCleanerForm.clrName" style="width: 50%"></el-input>
          </el-form-item>
          <el-form-item label="所属区域">
            <el-select v-model="addCleanerForm.clrArea" placeholder="请选择区域" clearable @change="searchStreets3">
              <el-option v-for="item in areasList"
                         :key="item.code"
                         :label="item.name"
                         :value="item.code"
              ></el-option>
            </el-select>
          </el-form-item>


          <el-form-item label="所属街道">
            <el-select v-model="addCleanerForm.clrStreet" clearable placeholder="请选择区域">
              <el-option v-for="item in streetsList3"
                         :key="item.code"
                         :label="item.name"
                         :value="item.code"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="状态">
            <el-select v-model="addCleanerForm.clrState" clearable placeholder="请选择状态">
              <el-option label="在职" value="1"></el-option>
              <el-option label="离职" value="0"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="头像上传">
            <el-upload
              class="avatar-uploader"
              :action="'http://localhost:8087/cleaner/uploadImg'"
              :show-file-list="false"
              :on-success="handleAvatarSuccess2"
              :before-upload="beforeAvatarUpload"
              name="myHeader">
              <img v-if="imageUrl2" :src="imageUrl2" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>

          </el-form-item>

          <el-form-item>
            <el-button @click="closeAddVisible">取 消</el-button>
            <el-button type="primary" @click="submitAdd">确 定</el-button>
          </el-form-item>

        </el-form>
        <span slot="footer" class="dialog-footer">

  </span>
      </el-dialog>
    </div>
    <!--模态框-->

<!--    <div>{{ imageUrl }}</div>
    <div>{{ editCleanerForm }}</div>
    <div>{{ streetsList2 }}</div>-->
  </div>
</template>

<!--清洁人员列表-->
<script>
import {
  addOneCleanerInfo,
  cleanerAllList,
  editOneCleanerInfo,
  searchCleaner,
  searchOneCleaner
} from "@/api/houseServiceApi/cleanerApi";
import {searchAreasDetail} from "@/api/areaApi/areaApi";
import {searchStreetsDetail} from "@/api/streetsApi/streetsApi";

export default {
  data() {
    return {

      imageUrl: '',
      imageUrl2: '',
      addVisible: false,
      editVisible: false,
      fit: ['fill', 'contain', 'cover', 'none', 'scale-down'],
      pageNum: 1,
      pageSize: 2,
      total: 0,
      areaInfo: '',
      streetsInfo: '',
      input: '上海市',
      areasList: '',
      streetsList: '',
      streetsList2: '',
      streetsList3: '',
      list: [],
      formInline: {
        name: '',
        state: ''
      },
      editCleanerForm: '',
      addCleanerForm: {
        clrName: '',
        clrWorkstate: '',
        clrState: '',
        clrArea: '',
        clrStreet: '',
        clrImg: '',
      },

    }
  },
  methods: {
    submitAdd() {
      addOneCleanerInfo(this.addCleanerForm)
      this.closeAddVisible();
      this.onSubmit();
    },
    closeAddVisible() {
      this.addVisible = false;
    },
    openAddVisible() {
      this.addVisible = true;
    },
    handleAvatarSuccess(res, file) {
      console.log(res.data)
      console.log(file)
      this.imageUrl = URL.createObjectURL(file.raw);
      this.editCleanerForm.clrImg = "http://139.224.186.148:10001/imgs/" + res.data.filename;
    },

    handleAvatarSuccess2(res, file) {
      console.log(res.data)
      console.log(file)
      this.imageUrl2 = URL.createObjectURL(file.raw);
      this.addCleanerForm.clrImg = "http://139.224.186.148:10001/imgs/" + res.data.filename;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    submitEdit() {
      editOneCleanerInfo(this.editCleanerForm).then((res) => {
        console.log(res)
      })
      this.closeEditVisible();
      this.onSubmit();
    },
    closeEditVisible() {
      this.editVisible = false;
    },
    openEditVisible(id) {
      searchOneCleaner({id: id}).then((res) => {
        console.log(res.data.cleaner);
        this.editCleanerForm = res.data.cleaner;
        searchStreetsDetail({code: this.editCleanerForm.clrArea}).then((res) => {
          console.log(res);
          this.streetsList2 = res.data.streetList;
        })

        this.imageUrl = this.editCleanerForm.clrImg;
        this.editVisible = true;
      })
    },
    delBatch() {

    },
    handleSizeChange(size) {
      this.pageNum = 1;
      this.pageSize = size;
      this.onSubmit();
    },
    handleCurrentChange(now) {
      this.pageNum = now;
      this.onSubmit();
    },

    /*多条件查询*/
    onSubmit() {
      searchCleaner({
        name: this.formInline.name, area: this.areaInfo, street: this.streetsInfo, state: this.formInline.state,
        pageNum: this.pageNum, pageSize: this.pageSize
      }).then((res) => {
        console.log(res.data)
        this.list = res.data.list.list;
        this.pageNum = res.data.list.pageNum;
        this.pageSize = res.data.list.pageSize;
        this.total = res.data.list.total;
      })
    },

    //查找街道区域联动
    searchStreets() {
      searchStreetsDetail({code: this.areaInfo}).then((res) => {
        console.log(res);
        this.streetsList = res.data.streetList;
        this.streetsInfo = '';
      })
    },

    searchStreets2() {
      searchStreetsDetail({code: this.editCleanerForm.clrArea}).then((res) => {
        console.log(res);
        this.streetsList2 = res.data.streetList;
        this.editCleanerForm.clrStreet = '';
      })

    },

    searchStreets3() {
      searchStreetsDetail({code: this.addCleanerForm.clrArea}).then((res) => {
        console.log(res);
        this.streetsList3 = res.data.streetList;
        this.addCleanerForm.clrStreet = '';
      })

    },

    //查找区列表
    searchAreas() {
      searchAreasDetail().then((res) => {
        console.log(res);
        this.areasList = res.data.areaList;
      })
    },

    initList() {
      cleanerAllList().then((res) => {
        console.log(res.data);
        this.list = res.data.list;
      })
    },

  },
  created() {
    this.onSubmit();
    this.searchAreas();
  },

}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style scoped>

</style>
